/**
 * Created by Freeman on 2017/11/7.
 */
import React from 'react';
import {StackNavigator, TabNavigator,TabBarBottom} from 'react-navigation';
import Login from '../components/Account/Login'
import Register from '../components/Account/Register'
import Bootstrap from '../navigation/Bootstrap'
import TopicProfile from "../components/TopicProfile";
import Ionicons from 'react-native-vector-icons/Ionicons'
import {COLOR} from '../config'
import Me from '../components/Me'
import About from '../components/About'
import Settings from '../components/Settings'
import UserProfile from '../components/Profile'
import HomeScreen from '../components/Home'
import ContactScreen from "../navigation/ContactScreen";
import WebScene from "../components/WebScene";
import {Platform} from "react-native";

const tabs = TabNavigator({
    Home: {
      screen: HomeScreen,
    },
    Contact: {
      screen: ContactScreen,
    },
    Profile: {
      screen: Me,
    },
  },
  {
    tabBarPosition: 'bottom',
    lazy: true,
    animationEnabled: false,
    swipeEnabled: false,
    tabBarComponent:TabBarBottom,
    navigationOptions: ({ navigation }) => ({
      activeTintColor: COLOR.theme,
      tabBarLabel: () =>{
        const {routeName} = navigation.state;
        let tabLabel = null;
        switch (routeName) {
          case 'Home':
            tabLabel ='首页';
            break;
          case 'Contact':
            tabLabel = '通讯录';
            break;
          case 'Profile':
            tabLabel ='我';
        }
        return tabLabel
      },
      tabBarIcon: ({tintColor,focused}) => {
        const {routeName} = navigation.state;
        let iconName = null;
        switch (routeName) {
          case 'Home':
            iconName =
              Platform.OS === 'ios'
                ? `ios-home${focused ? '' : '-outline'}`
                : 'md-home';
            break;
          case 'Contact':
            iconName = Platform.OS === 'ios' ? `ios-contact${focused ? '' : '-outline'}` : 'md-contact';
            break;
          case 'Profile':
            iconName =
              Platform.OS === 'ios' ? `ios-person${focused ? '' : '-outline'}` : 'md-person';
        }

        return (
          <Ionicons
            name={iconName}
            size={28}
            style={{ marginBottom: -3, width: 25 }}
            color={tintColor}
          />
        )
      }
    }),
  }
)

export default StackNavigator({
  Bootstrap: {
    screen: Bootstrap,
  },
  Login: {
    screen: Login,
  },
  Register: {
    screen: Register,
  },
  Home: {
    screen: tabs,
  },
  TopicProfile: {
    screen: TopicProfile,
  },
  About: {
    screen: About
  },
  Settings: {
    screen: Settings
  },
  UserProfile: {
    screen: UserProfile
  },
  Web: {
    screen: WebScene,
  }
}, {
  initialRouteName: 'Home',
  //mode: Platform.OS === 'ios' ? 'modal' : 'card',
  navigationOptions: {
    // headerStyle: { backgroundColor: color.primary }
    headerBackTitle: null,
    headerTintColor: '#333333',
    showIcon: true,
  },
});
